<template>
  <div class="details">
    <ContentWrap v-loading="isLoading">
      <List :column="4" sep="：" label-width="100" default-value="--">
        <ListItem label="购买渠道" dict-type-code="PURCHASE_CHANNEL" :value="detailObj.buyChannel" />
        <ListItem label="工单编号" :value="detailObj.workOrderCode" />
        <ListItem label="工单状态" :value="detailObj.workOrderStateName" />
        <ListItem label="派单接收情况">
          {{ detailObj.dispatchReceiveState || '未派单' }}
          <ReceiverDetail type="dispatch" :order-id="detailObj.id" style="display: inline-block;width: auto;"></ReceiverDetail>
        </ListItem>
        <ListItem label="抄送接收情况">
          {{ detailObj.ccReceiveState || '未抄送' }}
          <ReceiverDetail type="cc" :order-id="detailObj.id" style="display: inline-block;width: auto;"></ReceiverDetail>
        </ListItem>
        <ListItem label="创建人" :value="detailObj.createrName?`${detailObj.createrName}(${detailObj.createBy})${detailObj.createByPlatformNo?' - ' + detailObj.createByPlatformNo:''}`:''" />
        <ListItem label="创建时间" :value="detailObj.createTime || '--'" />
        <ListItem label="联系人" :value="detailObj.contactName" />
        <ListItem label="联系电话" :value="detailObj.contactPhone" :span="24/4*2">
          <span v-if="detailObj.contactPhone" slot="icon" style="margin-left: 10px;color:#00926d;">
            <svg-icon icon-class="shouji-solid" style="cursor:pointer;" @click="contactTpSms(detailObj.contactPhone)"></svg-icon>
            <!-- <SvgIcon slot="icon" icon-class="dianhuaboda-solid" style="margin-left: 10px;color:#00926d;cursor:pointer;" @click.native.stop="callOutHandle(detailObj.contactPhone)"></SvgIcon> -->
            <Button type="primary" @click="callOutHandle(detailObj.contactPhone)">外呼</Button>
            <SecondDial :record-id="recordId" style="margin-left:5px"></SecondDial>
          </span>
        </ListItem>
        <ListItem label="会员等级" :value="detailObj.level" />
        <ListItem v-show="detailObj.buyChannel==='1'" label="顾客ID" :value="detailObj.nickname" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="电商平台" :value="detailObj.onlinePlatformName || '--'" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="电商店铺" :value="detailObj.onlineShopName || '--'" />
        <ListItem label="平台订单号" :value="detailObj.orderCode" />
        <ListItem label="电商单号" :value="detailObj.ecOrderNumber" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="下单时间" :value="detailObj.orderTime ? detailObj.orderTime : '--'" />
        <ListItem v-show="detailObj.buyChannel==='1'" label="预约送货时间" :value="detailObj.deliveryTime || '--'" />
        <ListItem v-if="detailObj.buyChannel==='1'" label="配送方式" dict-type-code="CC_DELIVERY_TYPE" :value="detailObj.deliveryMethod" />
        <ListItem label="省" :value="detailObj.provinceName" />
        <ListItem label="市" :value="detailObj.cityName" />
        <ListItem label="区/县" :value="detailObj.countyName" />
        <ListItem label="街道" :value="detailObj.streetName" />
        <ListItem label="详细地址" :span="24" :value="detailObj.detailAddress" />
        <ListItem label="联系渠道" :value="detailObj.channelTypeName" />
        <ListItem label="一级业务类型" :value="detailObj.businessType1Name || '--'" />
        <ListItem label="二级业务类型" :value="detailObj.businessType2Name || '--'" />
        <ListItem v-if="[31, '31'].includes(detailObj.businessType2)" label="报修原因" dict-type-code="REPAIR_REASON" :value="detailObj.repairsReason" />
        <!--
          服务费类型显示条件：
          当一级业务类型为咨询(1)，二级业务类型为服务费(13);
          当一级业务类型为投诉/纠纷(2)，二级业务类型为服务费(13)时;
          当赔付原因为服务费(4)时
        -->
        <ListItem
          v-if="
            ([1,2].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 13 ) ||
              (detailObj.compensationCause && (detailObj.compensationCause.includes(4) || detailObj.compensationCause.includes('4')))
          "
          label="服务费类型"
          dict-type-code="SERVICE_FEE_TYPE"
          :value="detailObj.serviceFeeType"
        />
        <!--
          费用类型 条件：
          当一级业务类型为咨询(1)，二级业务类型为费用常规(14)时;
          当一级业务类型为投诉/纠纷(2)，二级业务类型为费用常规(14)时;
          当一级业务类型为业务办理(3)，二级业务类型为费用常规(14)时;
        -->
        <ListItem
          v-if="[1,2,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 14 "
          label="费用类型"
          dict-type-code="EXPENSE_TYPE"
          :value="detailObj.feeType"
        />
        <!--
          赔付原因：条件
          当一级业务类型为咨询(1)，二级业务类型为费用赔付(15)时;
          当一级业务类型为投诉/纠纷(2)，二级业务类型为费用赔付(15)时;
          当一级业务类型为业务办理(3)，二级业务类型为费用赔付(15)时;
        -->
        <ListItem
          v-if="[1,2,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 15"
          label="赔付原因"
          dict-type-code="COMPENSATION_REASON"
          :value="detailObj.compensationCause"
        />
        <!--
          发票子业务 条件：
          当一级业务类型为咨询(1)，二级业务类型为发票(16)时;
          当一级业务类型为业务办理(3)，二级业务类型为发票(16)时;
        -->
        <ListItem
          v-if="[1,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 16"
          label="发票子业务"
          dict-type-code="INVOICE_SUB_SERVICE"
          :value="detailObj.invoiceSubBusiness"
        />
        <!--当一级业务类型为投诉/纠纷(2)时-->
        <ListItem v-if="Number(detailObj.businessType1 || 0)===2" label="投诉原因" dict-type-code="COMPLAINTS_REASON" :value="detailObj.complaintCause" />
        <!--
          当一级业务类型为投诉/纠纷(2)，二级业务类型为服务态度(23)时展示此字段
        -->
        <ListItem
          v-if="Number(detailObj.businessType1 || 0)===2 && Number(detailObj.businessType2 || 0)===23 "
          label="被投诉对象"
          dict-type-code="OBJECT_OF_COMPLAINT"
          :value="detailObj.complaintObject"
        />
        <!--
          顾客不认可原因 条件：
          当【投诉原因】为“顾客不认可处理方案导致(57)”时
        -->
        <ListItem
          v-if="detailObj.complaintCause && (detailObj.complaintCause.includes(57) || detailObj.complaintCause.includes('57'))"
          label="顾客不认可原因"
          dict-type-code="CUSTOMER_DISAGREE_REASON"
          :value="detailObj.customerDisapprovalCause"
        />
        <!--
            投诉类型展示条件：
            当【一级业务类型】为“投诉/纠纷”(2)时
          -->
        <ListItem
          v-if="Number(detailObj.businessType1 || 0)===2"
          label="投诉类型"
          dict-type-code="COMPLAINTS_TYPE"
          :value="detailObj.complaintType"
        />

        <!--
          1.当一级业务类型为咨询(1)，二级业务类型为退货(18)时，展示该字段；
          2.当一级业务类型为咨询(1)，二级业务类型为换货(19)时，展示该字段；
          3.当一级业务类型为业务办理(3)，二级业务类型为退货(18)时，展示该字段；
          4.当一级业务类型为业务办理(3)，二级业务类型为换货(19)时，展示该字段；
        -->
        <ListItem
          v-if="[1,3].includes(Number(detailObj.businessType1 || 0)) && [18,19].includes(Number(detailObj.businessType2 || 0))"
          label="退/换货原因"
          dict-type-code="RETURN_REPLACEMENT_REASON"
          :value="detailObj.returnsCause"
        />
        <ListItem label="产品问题" dict-type-code="PRODUCT_PROBLEM" :value="detailObj.productProblem" />
        <!--
          运损类型 展示条件：
          【产品问题】为运损(5)时才展示此字段
        -->
        <!-- v-if="detailObj.repairsReason && (detailObj.repairsReason.includes(7) || detailObj.repairsReason.includes('7'))" -->
        <ListItem
          v-if="detailObj.transportationLossType"
          label="运损类型"
          dict-type-code="TRANSPORT_DAMAGE_TYPE"
          :value="detailObj.transportationLossType"
        />
        <ListItem label="产品类型" :value="detailObj.productTypeName" />
        <ListItem label="功能空间" :value="detailObj.functionalSpaceName" />
        <ListItem label="产品品类" :value="detailObj.productCategoryName" />
        <ListItem v-if="detailObj.productMode" label="产品型号" :value="detailObj.productMode" />
        <ListItem v-if="detailObj.productCode" label="产品编码" :value="detailObj.productCode" />
        <ListItem v-if="detailObj.productName" label="产品名称" :value="detailObj.productName" />
        <ListItem
          label="业务部门"
          dict-type-code="RESPONSIBLE_DEPARTMENT"
          :value="detailObj.bpmDeptCode"
        />
        <!-- 加盟信息 -->
        <template v-if="showJoinIn">
          <ListItem
            label="是否有店面"
            dict-type-code="ISOWN"
            :value="detailObj.hasShop"
          />
          <ListItem label="店面总面积" :value="detailObj.shopArea" />
          <ListItem
            label="意向经营业务"
            dict-type-code="BIZ_TYPE"
            :value="detailObj.bizType"
            app-code="slm"
          />
          <ListItem
            label="意向客户分类"
            dict-type-code="CTM_TOBE_CUSTOMER_TYPE"
            :value="detailObj.potentialType"
            app-code="slm"
          />
        </template>
        <ListItem :span="24" label="来电明细" :value="detailObj.callContent" />
        <ListItem :span="24" label="客服意见" :value="detailObj.customerServiceOpinion" />
        <ListItem label="责任部门" :value="detailObj.receiveDeptNames" />
        <ListItem label="办事处" :value="detailObj.officeName" />
        <ListItem label="经销商" :value="detailObj.disName" />
        <ListItem label="门店" :value="detailObj.shopName" />
        <ListItem label="售后联系人电话" :value="detailObj.afterSalesCall">
          <span v-if="detailObj.afterSalesCall" slot="icon" style="margin-left: 10px;color:#00926d;">
            <svg-icon icon-class="shouji-solid" style="cursor:pointer;" @click="contactTpSms(detailObj.afterSalesCall)"></svg-icon>
            <SvgIcon
              slot="icon"
              icon-class="dianhuaboda-solid"
              style="margin-left: 10px;color:#00926d;cursor:pointer;"
              @click.native.stop="callOutHandle(detailObj.afterSalesCall)"
            ></SvgIcon>
          </span>
        </ListItem>

        <ListItem label="紧急程度" :value="detailObj.urgencyDegreeName || '--'" />
        <ListItem label="紧急原因备注" :value="detailObj.urgencyCause || '--'" />
        <ListItem label="是否超期" :value="Number(detailObj.isOverdue) === 1 ? '超期' : Number(detailObj.isOverdue) === 0 ? '未超期' : '--'" />
        <ListItem label="超期原因" :value="detailObj.overdueReasonName || '--'" />
        <ListItem label="超时工单" :value="Number(detailObj.isTimeoutOrder) === 1 ? '是' : Number(detailObj.isTimeoutOrder) === 0 ? '否' : '--'" />
        <ListItem label="是否超时" :value="Number(detailObj.isTimeout) === 1 ? '超时' : Number(detailObj.isTimeout) === 0 ? '未超时' : '--'" />
        <ListItem v-if="Number(detailObj.isTimeoutOrder) === 1" label="超时原因" :value="detailObj.overtimeReason" dict-type-code="OVER_TIME_REASON" />
        <ListItem label="处理截止时间" :value="detailObj.processingDeadline || '--'" />
        <ListItem label="处理时效" :value="detailObj.timeoutReasonName || '--'" />
        <ListItem label="处理人" :value="detailObj.handlerList instanceof Array ? detailObj.handlerList.map(e=>`${e.handlerName}(${e.handler})`).join(','):''" />
        <ListItem
          label="处理方案"
          dict-type-code="PROCESS_METHOD"
          :value="detailObj.handleScheme"
        />
        <!--
          支付方式展示条件：
          1.当一级业务类型为咨询(1)，二级业务类型为费用常规(14)时，展示该字段；
          2.当一级业务类型为投诉/纠纷(2)，二级业务类型为费用常规(14)时，展示该字段；
          3.当一级业务类型为业务办理(3)，二级业务类型为费用常规(14)时，展示该字段；
          4.当一级业务类型为咨询(1)，二级业务类型为费用赔付(15)时，展示该字段；
          5.当一级业务类型为投诉/纠纷(2)，二级业务类型为费用赔付(15)时，展示该字段；
          6.当一级业务类型为业务办理(3)，二级业务类型为费用赔付(15)时，展示该字段；
          7.当处理方案为费用赔付(2)/赠品(3)/退差(11)/退款(12)时，展示该字段。
        -->
        <ListItem
          v-if="
            ([1,2,3].includes(Number(detailObj.businessType1 || 0)) && [14,15].includes(Number(detailObj.businessType2 || 0))) || (
              detailObj.handleScheme &&
              (detailObj.handleScheme.includes(2) || detailObj.handleScheme.includes('2') ||
              detailObj.handleScheme.includes(3) || detailObj.handleScheme.includes('3')||
              detailObj.handleScheme.includes(11) || detailObj.handleScheme.includes('11')||
              detailObj.handleScheme.includes(12) || detailObj.handleScheme.includes('12'))
            )
          "
          label="支付方式"
          dict-type-code="PAYMENT_MODE"
          :value="detailObj.paymentMode"
        />
        <!--
            1.当一级业务类型为咨询(1)，二级业务类型为费用赔付(15)时，展示该字段；
            2.当一级业务类型为投诉/纠纷(2)，二级业务类型为费用赔付(15)时，展示该字段；
            3.当一级业务类型为业务办理(3)，二级业务类型为费用赔付(15)时，展示该字段；
            4.当处理方案为费用赔付(2)/退差(11)/退款(12)时，展示该字段。
          -->
        <ListItem
          v-if="
            ([1,2,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0)===15)|| (
              detailObj.handleScheme &&
              (detailObj.handleScheme.includes(2) || detailObj.handleScheme.includes('2') ||
              detailObj.handleScheme.includes(11) || detailObj.handleScheme.includes('11')||
              detailObj.handleScheme.includes(12) || detailObj.handleScheme.includes('12'))
            )
          "
          label="赔付金额"
          :value="detailObj.compensationFee"
        />
        <!--
          1.当【支付方式】为赠品(5)时，展示该字段；
          2.手动录入，允许汉字、数字、标点符号
        -->
        <ListItem
          v-if="detailObj.paymentMode && (detailObj.paymentMode.includes(5) || detailObj.paymentMode.includes('5'))"
          label="赠品名称"
          :value="detailObj.gift"
        />
        <template v-if="[1,3].includes(Number(detailObj.businessType1 || 0)) && Number(detailObj.businessType2 || 0) === 22">
          <!-- 1.工单一级业务类型为咨询(1)/业务办理(3)，二级业务类型为送装服务(22)，才展示该板块信息。 -->
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="送装服务信息" />
          </ListItem>
          <ListItem
            label="送装需求"
            dict-type-code="DELIVERY_INSTALL_DEMAND"
            :value="detailObj.deliveryNeed"
          />
          <ListItem label="预约送装服务时间" :value="detailObj.bookingServiceTime" />
        </template>

        <template v-if="Number(detailObj.businessType1 || 0) === 3 && [18,19,31,32,33].includes(Number(detailObj.businessType2 || 0))">
          <!-- 当一级业务类型为业务办理(3)，二级业务类型为退货(18),换货(19),报修(31)/拆装(33)/保养(32)时，才展示该板块信息。 -->
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="售后服务信息" />
          </ListItem>
          <ListItem label="服务师傅" :value="detailObj.repairTeacherName || '--'" />
          <ListItem label="师傅号码" :value="detailObj.repairTeacherPhone || '--'" />
          <ListItem label="服务费" :value="detailObj.serviceCharge || '--'" />
          <ListItem label="服务时间" :value="detailObj.repairDate || '--'" />
          <ListItem
            label="维修进度"
            dict-type-code="PROCESS_RATE"
            :value="detailObj.processRate"
          />
          <ListItem label="核算二次费用" :value="detailObj.isTwoCheckComputation===1?'是':detailObj.isTwoCheckComputation===0?'否':'--'" />
        </template>

        <template v-if="Number(detailObj.businessType2 || 0)===31">
          <!-- 当【二级业务类型】为报修(31)时，展示该字段。 -->
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="补件列表" />
          </ListItem>
          <ListItem :span="24">
            <PbillList
              v-if="detailObj && detailObj.id"
              ref="billList"
              :readonly="true"
              :dis-code="detailObj.disCode"
              :patch-code.sync="detailObj.patchCode"
            ></PbillList>
          </ListItem>
        </template>

        <ListItem :span="24">
          <Title slot="content" class="custom-title" title="产品信息" />
        </ListItem>
        <ListItem :span="24">
          <ShowProductInfoList :table-data="detailObj.productInfoDTOList || []"></ShowProductInfoList>
        </ListItem>
        <template v-if="(detailObj.returnGoodsProcessDTOS || []).length>0">
          <ListItem :span="24">
            <Title slot="content" class="custom-title" title="退货进度">
            </Title>
          </ListItem>
          <ListItem :span="24">
            <ReturnedGoods :table-data="detailObj.returnGoodsProcessDTOS || []"></ReturnedGoods>
          </ListItem>
        </template>
        <!-- 提交留言的限制取消了，所有状态的工单都可以留言 -->
        <!-- <template v-if="detailObj.workOrderState!==3"> -->
        <ListItem :span="24">
          <Title slot="content" class="custom-title" title="留言信息" />
        </ListItem>
        <ListItem :span="24">
          <el-input v-model="amendData.content" type="textarea" :autosize="{minRows:4}" placeholder="请输入" />
        </ListItem>
        <!-- </template> -->
        <ListItem :span="24">
          <div slot="content" class="button-container">
            <!-- <DialogUpload :on-success="onSuccessHandle" multiple :destroy="false" :on-remove="onRemoveHandle" :on-change="onChangeHandle" :exist-file-list="annexList" /> -->
            <DialogUpload
              :on-success="onSuccessHandle"
              multiple
              :destroy="false"
              :on-remove="removeHandle"
              :before-remove="beforeRemoveHandle"
              :on-change="onChangeHandle"
              :exist-file-list="annexList"
              text="附件管理"
              title="附件管理"
            />
            <AbnormalReport
              :carbon-info="detailObj"
              :order-id="detailObj.id"
              :work-order-code="detailObj.workOrderCode"
              :work-order-state="detailObj.workOrderState"
              :button-auth="bottomAuth.abnormal"
              @on-success="abnormalSuccess"
            />
            <Button type="primary" :loading="submitOrderLoading" @click="submitOrderMessage">提交</Button>
            <Button v-if="detailObj.workOrderState === 3" type="primary" @click="copyWorkOrder">复制工单</Button>
          </div>
        </ListItem>
        <ListItem :span="24">
          <Title slot="content" class="custom-title order-top" title="工单流水记录" />
        </ListItem>
        <ListItem :span="24">
          <div slot="content" class="order-list">
            <FlowOrder v-for="(f,i) in flowListSort" :key="i" :flow="f" />
          </div>
        </ListItem>
      </List>
    </ContentWrap>
    <CallOut ref="callOut"></CallOut>
  </div>
</template>
<script>
import ContentWrap from '@/components/ContentWrap'
import Title from '@/components/Title'
import Button from '@/components/Button'
import { List, ListItem } from '@/components/List'
import DialogUpload from '@/components/Upload/DialogUpload'
import FlowOrder from '../components/FlowOrder'
import PbillList from '../components/PbillList'
import AbnormalReport from '../components/AbnormalReport'
import ReceiverDetail from '../components/ReceiverDetail'
import ShowProductInfoList from '../components/ShowProductInfoList'
import ReturnedGoods from '../components/ReturnedGoods'
import SecondDial from '@/views/callBarPage/callOut/components/SecondDial'

import { getByIdWorkOrderRecord, putQueryOrderSubmit, deleteAnnex, getWorkOrderByCode } from '@/api/workOrder'

export default {
  name: 'QueryOrderDetails',
  components: {
    ContentWrap,
    ListItem,
    List,
    Title,
    Button,
    DialogUpload,
    FlowOrder,
    PbillList,
    AbnormalReport,
    ReceiverDetail,
    ShowProductInfoList,
    ReturnedGoods,
    SecondDial
  },
  data() {
    return {
      isLoading: true,
      pageId: '',
      amendData: {
        id: '',
        content: ''
      },
      detailObj: {},
      // 工单流水记录
      flowList: [],
      // 已经存在的附件
      annexList: [],
      imageList: [],
      submitOrderLoading: false,
      bottomAuth: {
        abnormal: true
      }, // 按钮操作是否可用
      patchCodeList: [], // 补件单号集合
      recordId: '' // 通話記錄id
    }
  },
  computed: {
    flowListSort() {
      const list = [...this.flowList]
      return list.sort((f, l) => {
        const fd = new Date(f.createTime).getTime()
        const ld = new Date(l.createTime).getTime()
        return ld - fd
      })
    },
    showJoinIn() {
      const { businessType1, businessType2 } = this.detailObj
      return [1, '1'].includes(businessType1) && [6, '6'].includes(businessType2)
    }
  },
  created() {
    this.getDetail()
  },
  methods: {
    getDetail() {
      const { workOrderNo, form } = this.$route.query
      const forms = ['telRecord', 'care', 'any']
      if (forms.includes(form) && workOrderNo) {
        this.telRecordDetail(workOrderNo)
        return
      }
      if (this.$route.query.id) {
        this.pageId = this.$route.query.id
        this.$nextTick(() => {
          if (this.pageId) this.getDisposeOrderDetail(this.pageId)
        })
        return
      }
      this.isLoading = false
    },
    // 工单查询跳转获取详情
    getDisposeOrderDetail(id) {
      if (id === '') {
        this.closeCurrentTag()
        return
      }
      this.isLoading = true
      getByIdWorkOrderRecord(id).then(async(res) => {
        if (res.success === 1) {
          const data = { ...res.data }
          this.patchCodeList = data.patchCode ? data.patchCode.split(' ') : []
          data.bpmDeptName = await this.$getDictValue('RESPONSIBLE_DEPARTMENT', data.bpmDeptCode)
          data.channelTypeName = await this.$getDictValue('CHANNEL_TYPE', String(data.channelType))
          data.productTypeName = await this.$getDictValue('PRODUCT_TYPE', String(data.productType))
          data.functionalSpaceName = await this.$getDictValue('FUNCTIONAL_SPACE', String(data.functionalSpace))
          data.productCategoryName = await this.$getDictValue('PRODUCT_CATEGORY', String(data.productCategory))
          data.urgencyDegreeName = await this.$getDictValue('URGENCY_DEGREE', String(data.urgencyDegree))
          data.overdueReasonName = await this.$getDictValue('OVERDUE_REASON', String(data.overdueReason))
          data.timeoutReasonName = await this.$getDictValue('TIMEOUT_REASON', String(data.timeoutReason))
          data.workOrderStateName = await this.$getDictValue('WORK_ORDER_STATUS', String(data.workOrderState))
          data.processRate = await this.$getDictValue('PROCESS_RATE', String(data.processRate))
          data.businessType1Name = await this.$getDictValue('FIRST_LEVEL_BUSINESS_TYPE', String(data.businessType1))
          data.businessType2Name = await this.$getDictValue('SECOND_LEVEL_BUSINESS_TYPE', String(data.businessType2))
          this.amendData.id = data.id
          // this.flowList = (data.processingList || []).reverse()
          this.flowList = data.processingList || []
          if (Array.isArray(data.annexList) && data.annexList.length) {
            this.annexList = data.annexList.map(list => {
              list['name'] = list.fileName
              list['url'] = list.filePath
              return list
            })
          }
          this.$nextTick(() => {
            this.detailObj = { ...data }
            this.isLoading = false
          })
        }
      }, () => {
        this.isLoading = false
      })
    },
    // 弹屏获取详情
    telRecordDetail(workOrderNo) {
      if (workOrderNo === '') {
        this.closeCurrentTag()
        return
      }
      this.isLoading = true
      getWorkOrderByCode(workOrderNo).then(async(res) => {
        if (res.success === 1) {
          const data = { ...res.data }
          this.patchCodeList = data.patchCode ? data.patchCode.split(' ') : []
          data.bpmDeptName = await this.$getDictValue('RESPONSIBLE_DEPARTMENT', data.bpmDeptCode)
          data.channelTypeName = await this.$getDictValue('CHANNEL_TYPE', String(data.channelType))
          data.productTypeName = await this.$getDictValue('PRODUCT_TYPE', String(data.productType))
          data.functionalSpaceName = await this.$getDictValue('FUNCTIONAL_SPACE', String(data.functionalSpace))
          data.productCategoryName = await this.$getDictValue('PRODUCT_CATEGORY', String(data.productCategory))
          data.urgencyDegreeName = await this.$getDictValue('URGENCY_DEGREE', String(data.urgencyDegree))
          data.overdueReasonName = await this.$getDictValue('OVERDUE_REASON', String(data.overdueReason))
          data.timeoutReasonName = await this.$getDictValue('TIMEOUT_REASON', String(data.timeoutReason))
          data.workOrderStateName = await this.$getDictValue('WORK_ORDER_STATUS', String(data.workOrderState))
          data.processRateName = await this.$getDictValue('PROCESS_RATE', String(data.processRate))
          data.businessType1Name = await this.$getDictValue('FIRST_LEVEL_BUSINESS_TYPE', String(data.businessType1))
          data.businessType2Name = await this.$getDictValue('SECOND_LEVEL_BUSINESS_TYPE', String(data.businessType2))
          this.amendData.id = data.id
          if (!this.pageId) this.pageId = data.id
          this.flowList = data.processingList || []
          if (Array.isArray(data.annexList) && data.annexList.length) {
            this.annexList = data.annexList.map(list => {
              list['name'] = list.fileName
              list['url'] = list.filePath
              return list
            })
          }
          this.$nextTick(() => {
            this.detailObj = { ...data }
            this.isLoading = false
          })
        }
      })
    },
    // 检查文件总大小
    checkFileSizeGt100() {
      let sumSize = 0
      this.imageList.forEach(e => {
        sumSize += e.size
      })
      // 限制100m
      if (sumSize > 100 * 1024 * 1024) {
        this.$message.error('上传文件总大小不能大于100M！')
        return true
      }
      return false
    },
    /**
     * 提交工单
     */
    submitOrderMessage() {
      if (this.checkFileSizeGt100()) {
        return
      }
      const paramsObj = new FormData()
      const params = { ...this.amendData }
      if (!params.content) {
        this.$message({
          message: '请输入留言内容',
          type: 'warning'
        })
        return
      }
      for (const file of this.imageList) {
        if (file) paramsObj.append('files', file)
      }
      params.content = ` 留言内容：${params.content ? params.content : '--'}`
      paramsObj.append('content', params.content)
      this.$msgbox({
        title: '提交工单',
        showCancelButton: true,
        cancelButtonText: '取消',
        confirmButtonText: '确定',
        type: 'warning',
        message: '确定提交工单?'
      }).then(() => {
        this.submitOrderLoading = true
        const workOrderId = params.id
        return putQueryOrderSubmit(workOrderId, paramsObj).then(res => {
          if (res.success === 1) {
            this.$message({
              message: '工单提交成功',
              type: 'success'
            })
            this.reloadDetailInfo()
          }
        }).finally(() => {
          this.submitOrderLoading = false
        })
      })
    },
    // 上传附件成功
    onSuccessHandle(res, file, fileList) {
      // console.log('upload')
      // console.log(res, file, fileList)
    },
    // 文件改变时
    onChangeHandle(file, fileList) {
      this.imageList = fileList.map((list) => {
        return list.raw
      }).filter(e => {
        return e !== undefined
      })
      // console.log(this.imageList[0])
    },
    beforeRemoveHandle(file, fileList) {
      return this.$msgbox({
        title: '删除',
        message: '确认删除该附件？',
        showCancelButton: true,
        type: 'warning'
      }).then(() => {
        if (file.status === 'success') {
          const fileObj = { ...file }
          delete fileObj.name
          delete fileObj.url
          return deleteAnnex(fileObj).then(res => {
            this.$message({
              message: '附件删除成功',
              type: 'success'
            })
            return 'success'
          })
        }
      })
    },
    // 删除成功
    removeHandle(file, fileList) {
      this.imageList = fileList.map((list) => {
        return list.raw
      }).filter(e => {
        return e !== undefined
      })
    },
    // 刷新工单流水
    reloadDetailInfo() {
      getByIdWorkOrderRecord(this.pageId).then(async(res) => {
        if (res.success === 1) {
          const data = { ...res.data }
          this.flowList = data.processingList
        }
      })
    },
    // 外呼
    callOutHandle(phone) {
      if (!phone) {
        this.$message.info('没有电话号码！')
        return
      }
      this.$refs.callOut.debounceCallOut(phone).then(recordId => {
        console.log('通话记录id: ', recordId)
        this.recordId = recordId
      })
    },
    // 客户联系电话  发送短信
    contactTpSms(telPhone) {
      const callTel = (telPhone || '').trim()
      const workOrderCode = ''
      const content = ''
      this.$router.push({ name: 'SMSSend', query: { callTel, workOrderCode, content }})
    },
    // 上报异常
    abnormalSuccess() {
      this.$set(this.bottomAuth, 'abnormal', false)
      this.getDetail()
    },
    // 复制工单
    copyWorkOrder() {
      const { id, workOrderState } = this.detailObj
      this.$router.push({ name: 'CreateOrder', query: { id: id, state: workOrderState }})
    }
  }
}
</script>
<style lang='scss' scoped>
.details{

}
.details .content-wrap {
  padding: 10px 25px;
}
.details .content-wrap /deep/ .el-row .el-col {
  line-height: 32px;
}
.details .content-wrap /deep/ .el-row .custom-list-item {
  margin-bottom: 0;
}
.details .content-wrap /deep/ .el-row .custom-list-item .label-style {
  text-align-last: right;
}
.details .content-wrap /deep/ .el-row .custom-list-item span:first-child {
  width: auto;
  font-size: 12px;
  text-align: right;
}
.details .content-wrap /deep/ .el-row .custom-list-item span:last-child {
  font-size: 12px;
}
.details .content-wrap /deep/ .call-detail {
  line-height: 24px;
}
.details .content-wrap /deep/ .custom-title {
  padding: 0;
}
.details .content-wrap /deep/ .order-top {
  // padding-top: 30px;
}
.details .content-wrap /deep/ .custom-title h3 {
  font-weight: bold;
  font-size: 14px;
  color: #16BC83;
}
.details .content-wrap /deep/ .order-list {
  line-height: 18px;
}
.details .content-wrap /deep/ .order-list p:first-child {
  width: 20%;
  flex: 0 0 20% !important;
}
.details .content-wrap /deep/ .order-list p:nth-child(2) {
  width: 20%;
  flex: 0 0 20% !important;
}
.details .content-wrap /deep/ .order-list p:nth-child(3) {
  width: 37%;
  flex: 0 0 37% !important;
}
.details .content-wrap /deep/ .order-list p:last-child {
  width: 15%;
  flex: 0 0 15% !important;
}
</style>
